<template>
  <div>
     <!-- 自定义导航 -->
    <!-- <van-nav-bar :title="navName" left-text="返回" right-text="添加设备" left-arrow @click-left="cancel" @click-right="addEquipment" :fixed="true"/> -->
     <!-- 主题内容 -->
    <div style="margin-top:1px;background:#fff;">
      <div class="layout" v-for="(item, $index) in val" :key="$index" @click="seletVal(item)">
        <div>
          <div style="display:flex;justify-content:space-between;">
            <div>
              <div style="font-size:18px; margin:1px 0 10px 0; margin-left:12px" class="openColor">{{item.name}}</div>
            </div>
          </div>
          <div class="tex">
            <div class="shenglv">设备类别:{{item.specClass}}</div>
            <div class="daima">设备代码:{{item.code}}</div>
          </div>
        </div>
        <div><van-icon  class-prefix="my-icon" name="jiantou" size="20px" color="#7F7F7F" style="margin-right:8px"/></div>
      </div>
    </div>
     <div style="height:82px"></div>
     <div class="paddi">
      <van-button color="#08395b" :block="true" class="btn" :to='{path: "/addequipment"}'>添加设备</van-button>
    </div>
    <!-- 数据为空显示 -->
    <equipment-kong v-if="conentShow"></equipment-kong>
    <van-loading type="spinner" color="#09385B" v-if="loadingShow" style="position:absolute; top:40%; left:46%"/>
  </div>
</template>
<script>
import equipmentKong from "@/views/components/equipmentKong.vue"
export default {
  components:{
    equipmentKong
  },
  data(){
    return{
      loadingShow: true,
      conentShow: false,  //页面为空显示  控制
      navName: localStorage.getItem('navName'), //导航名称
      val: []
    }
  },
  methods:{
    //获取设备列表数据
    getequipmentList(){
      let ProID = sessionStorage.getItem('ProID');
      let buildID = sessionStorage.getItem('buildID');
      let floorID = sessionStorage.getItem('floorID');
      let spacesID = sessionStorage.getItem('spacesID');
      this.$http.get(`/api/equipments/getEquipmentsList?limit=999&page=1&locationId=${ProID}&buildingId=${buildID}&floorId=${floorID}&spaceId=${spacesID}`,{
        headers:{ 'Authorization':localStorage.getItem('token'),}
      }).then(res =>{
        if(res.data.errcode == 0){
          if(res.data.data.list.length==0){
           this.loadingShow = false;
            setInterval(res =>{
              this.conentShow = true;
            },1500);
          }else{
            this.loadingShow = false;
            this.conentShow = false;
            this.val = res.data.data.list;
          }
        }
      })
    },
    //选择的内容
    seletVal(val){ 
      sessionStorage.setItem("equiomenID", val.id)
      sessionStorage.setItem('equiomentVal', JSON.stringify(val)); //点击的数据存储 sessionStorage
      this.$router.push({path: '/equipmentPrev'})
    },
    // 返回上一层
    cancel(){
      this.$router.push({path: '/spaces'});//返回上一层
    }
  },
  created(){
    this.getequipmentList();
  },
}
</script>

<style scoped>
.layout{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 0.5px solid #E0E0E0;
  padding: 12px 0;
}
.layout:first-child{
   border-top: none;
}
.shenglv{
  margin-left:3.6%;
  font-size: 30px;
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/* 超出部分显示省略号 */
  white-space: nowrap;/*规定段落中的文本不进行换行 */
  width: 300px;/*需要配合宽度来使用*/
  /* border: 1px solid red; */
}
.tex{
  display: flex;
  color:#7E888A; 
  margin:12px 0 4px 0;
  font-size:26px
}
.daima{
  font-size: 30px;
  margin-left:20px;
  overflow: hidden;/*超出部分隐藏*/
  text-overflow:ellipsis;/* 超出部分显示省略号 */
  white-space: nowrap;/*规定段落中的文本不进行换行 */
  width: 350px;/*需要配合宽度来使用*/
  /* border: 1px solid red; */
}
.openColor{
  color: #474747;
  font-weight: 600;
  font-size: 32px;
}
.paddi{
  background: #fff;
  padding: 2% 0;
  position:fixed;
  left:0;
  bottom:0%;
  width: 100%;
  display: flex;
  align-content: center;
  flex-direction: column;
  justify-content: center;
  /* margin: 0 auto; */
}
  .btn{
    font-size: 32px;
    width:94%; 
    margin:11px auto; 
    border-radius:8px;
  }
/* .closeColor{
  color: #999;
  font-size: 32px;
} */
</style>